<template>
    <el-image
        :class="['lazy-image-container', props.className]"
        :src="imgUrl"
        lazy
        :alt="alt"
        :fit="fit">
        <template #placeholder>
            <div class="image-slot">
                <img src="~@/assets/img/common/lazy-loading-img.png" alt="">
            </div>
        </template>
        <template #error>
            <div class="image-slot">
                <img src="~@/assets/img/common/lazy-loading-error.png" alt="">
            </div>
        </template>
    </el-image>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
    src: { // 图片路径
        type: String,
        default: ''
    },
    fit: { // 图片如何自适应 'fill' | 'contain' | 'cover' | 'none' | 'scale'-down'
        type: String,
        default: 'fill'
    },
    alt: {
        type: String,
        default: ''
    },
    className: {
        type: String,
        default: ''
    }
});

let imgUrl = computed(() => {
    return props.src;
})


</script>

<style lang="scss" scoped>
.lazy-image-container {
    .image-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #EBEBEB;;
        img {
            width: 64px;
            height: 42px;
        }

    }
}
</style>